<style scoped>
    .nightingale_chart_main{
        width: 20vw;
        height: 24.4vh;
    }

    .dynamic_loop_diagram_left{
        width: 10vw;
        height: 24.4vh;
        float: left;
    }

    .dynamic_loop_diagram_right{
        width: 10vw;
        height: 24.4vh;
        float: left;
    }
</style>

<template>
    <div class="dynamic_loop_diagram">
        <div class="dynamic_loop_diagram_left">
            <dv-active-ring-chart :config="config" style="width:9.2vw;height: 24.4vh;margin:-1vh 0 0 0.2vw;" />
        </div>
        <div class="dynamic_loop_diagram_right">
            <dv-capsule-chart :config="config" 
                style="width: 10vw; height: 24.4vh; color:#F5F7FA; font-weight: 600;top:0; right: 1.2vw" />
        </div>
    </div>
</template>


<script>
    export default {
        data () {
            return {
                config: {
                    radius: '52%',
                    activeRadius: '65%',
                    color:['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#FC8452'],
                    colors: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE', '#3BA272', '#FC8452'],
                    lineWidth:'35',
                    data: [
                        {
                            name: '照明',
                            value: 40
                        },{
                            name: '充电桩',
                            value: 38
                        },{
                            name: '空调',
                            value: 36
                        },{
                            name: '电梯',
                            value: 32
                        },{
                            name: '大楼亮化',
                            value: 30
                        },{
                            name: '生活水泵',
                            value: 28
                        },{
                            name: '消防水泵',
                            value: 26
                        }
                    ],
                    digitalFlopStyle: {
                        fontSize: 16,
                        fill: '#F5F7FA'
                    },
                    showOriginValue: true,
                    showValue: true,
                }
            }
        }

    }
  </script>